<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../polymer.html">

<body>
  <x-outer></x-outer>
    
    <dom-module id="x-outer">
      <template>
        <x-test id="test1"></x-test>
        <button on-tap="_addDomBindDirectly">Add dom-bind directly</button>
        <span>&lt;&lt;&lt; Doesn't work the first time</span>
        <br /><br />
        <x-test id="test2"></x-test>
        <button on-tap="_addDomBindIndirectly">Add dom-bind indirectly</button>
        <span>&lt;&lt;&lt; Works every time</span>
      </template>
    </dom-module>
    
    <dom-module id="x-test">
      <template>
        <content></content>
      </template>
    </dom-module>

    <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-test'
      });
      
      Polymer({
        is: 'x-outer',
        _addDomBindDirectly: function() {
          var domBind = this._createDomBind();
          Polymer.dom(this.$.test1).appendChild(domBind);
        },
        _addDomBindIndirectly: function() {
          var domBind = this._createDomBind();
          
          var tempContainer = document.createElement("div");
          tempContainer.appendChild(domBind);
          
          Polymer.dom(this.$.test2).appendChild(tempContainer);
        },
        _createDomBind: function() {
          var domBind = document.createElement("template", "dom-bind");
          domBind.test = "hello";

          var doc = domBind.content.ownerDocument;
          var div = doc.createElement("div");
          div.textContent = "{{test}}";

          domBind.content.appendChild(div);
          
          return domBind;
        }
      });
    });
    </script>
  

</body>

